<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="query.name" placeholder="新闻标题" class="handle-input mr10"></el-input>
                <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
                <el-button type="primary" :icon="Plus" @click="showPublish">发步新闻</el-button>
            </div>
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                v-loading="tableLoading">
                <el-table-column align="center" prop="id" label="新闻ID" width="55"></el-table-column>
                <el-table-column align="center" prop="title" label="新闻标题" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column align="center" label="创建者" prop="username"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
                <el-table-column align="center" label="新闻描述" prop="outline" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column align="center" label="操作" width="250">
                    <template #default="scope">
                        <el-button text :icon="ChatLineRound" @click="showComment(scope.row)" v-permiss="4">
                            管理评论
                        </el-button>
                        <el-button text :icon="Delete" class="red" @click="handleDelete(scope.row)" v-permiss="4">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
                    :page-size="query.limit" :total="query.total" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- 发布新闻 -->
        <publishVue ref="publish" @refresh="getData"/>
        <!-- 评论管理弹出框 -->
        <el-dialog :title="`id为${commentForm.newsId}新闻的评论`" v-model="commentVisible" width="70%" align-center
            @close="() => { commentVisible = false }">
            <el-table :data="commentTable" border class="table" ref="multipleTable" header-cell-class-name="table-header"
                v-loading="addLoading">
                <el-table-column align="center" prop="id" label="评论ID" width="55"></el-table-column>
                <el-table-column align="center" prop="content" label="评论内容" :show-overflow-tooltip="true"  width="400"></el-table-column>
                <el-table-column align="center" label="创建者" prop="username"></el-table-column>
                <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
                <el-table-column align="center" label="操作" width="250">
                    <template #default="scope">
                        <el-button text :icon="Delete" class="red" @click="deleteComment(scope.row)" v-permiss="4">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="commentForm.pageIndex"
                    :page-size="commentForm.limit" :total="commentForm.total" @current-change="commentPageChange"></el-pagination>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="userManage">
import { reactive, ref } from "vue";
import publishVue from './dialog/publish.vue'
import { Delete, ChatLineRound, Search, Plus } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getPage, deleteArticle,getComPage,deleteCom } from '../api/article'

const query = reactive({
    name: '',
    pageIndex: 1,
    total: 0,
    limit: 8
})
const tableLoading = ref(false);
const tableData = ref([])
const publish:any = ref(null)
const showPublish = () =>{
    publish.value.emitShow();
}
// 获取数据
const getData = () => {
    tableLoading.value = true
    const params = {
        title: query.name,
        page: query.pageIndex,
        limit: query.limit,
        type:'news'
    }
    getPage(params).then((res: any) => {
        if (res.code !== 200) return ElMessage.error(res.msg || '获取新闻列表失败')
        const { data } = res;
        query.total = data.total;
        tableData.value = data.data
    }).finally(() => tableLoading.value = false)
}
getData();
// 点击搜索
const handleSearch = () => {
    getData();
}
// 展示添加用户框
const showComment = (row: any) => {
    commentVisible.value = true;
    commentForm.newsId = row.id;
    getComment();
}
// 删除用户操作
const handleDelete = (row: any) => {
    // 二次确认删除
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    }).then(() => {
        deleteArticle({ id: row.id }).then((res: any) => {
            if (res.code !== 200) return ElMessage.error(res.msg || '删除失败')
            ElMessage.success(res.msg || '删除成功！')
            getData();
        })

    })
}
// 页码改变回调
const handlePageChange = (val: number) => {
    query.pageIndex = val;
    getData();
}


// 评论弹窗相关
const commentVisible = ref(false)
const addLoading = ref(false)
const commentTable = ref([])
const commentForm = reactive({
    newsId: '',
    pageIndex:1,
    limit:8,
    total:0
})

const getComment = ()=>{
    addLoading.value = true;
    const params = {
        page:commentForm.pageIndex,
        limit:commentForm.limit,
        newsId:commentForm.newsId,
    }
    getComPage(params).then((res:any)=>{
        if (res.code !== 200) return ElMessage.error(res.msg || '获取评论列表失败')
        const { data } = res;
        commentForm.total = data.total;
        commentTable.value = data.data
    }).finally(() => addLoading.value = false)
}
// 页码改变回调
const commentPageChange = (val: number)=>{
    commentForm.pageIndex = val;
    getComment();
}
// 删除评论
const deleteComment =(row:any)=>{
    // 二次确认删除
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    }).then(() => {
        deleteCom({ id: row.id }).then((res: any) => {
            if (res.code !== 200) return ElMessage.error(res.msg || '删除失败')
            ElMessage.success(res.msg || '删除成功！')
            getComment();
        })

    })
}
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
}

.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}

.pagination {
    display: flex;
    justify-content: space-between;
}
</style>